<template>
    <div class="categories__wrapper">
        <div class="row g-4">
            <div class="col-xl-6 col-lg-8 col-md-12 col-sm-12">
                <div class="categories__header" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                    <div class="subtitle subtitle--style3">
                        <img src="/images/icon/home3/1.png" alt="star icon">
                        <p class="mb-0">Courses Details</p>
                    </div>
                    <h2>Explore Our Categories</h2>
                    <p class="style3">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
                        Velit officia consequat duis enim velit mollit.</p>

                    <nuxt-link to="/courses" class="trk-btn trk-btn--secondary3"> All
                        Categories <span><i class="fa-solid fa-arrow-right"></i></span> </nuxt-link>
                </div>

            </div>
            <div v-for="(item, idx) in categoryListThree" :key="idx" class="col-xl-3 col-lg-4 col-md-4 col-6">
                <div class="categories__item" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                    <div class="categories__item-inner">
                        <div class="categories__item-thumb">
                            <img :src="item.icon" alt="course icon">
                        </div>
                        <div class="categories__item-content">
                            <nuxt-link to="/course-category" class="stretched-link active">{{ item.title }}</nuxt-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        categoryListThree: {
            type: Array,
            default: () => [],
        },
    }
}
</script>